<template>
  <div>
    <!-- 输入框：用户输入字符串 -->
    <el-input
      v-model="inputStr"
      style="width: 500px; margin-bottom: 20px"
      type="textarea"
      :rows="3"
      placeholder="请输入字符串（例如：XX主变220kV#1主变热备用初始状态目标状态冷备用）"
    />

    <!-- 渲染染色后的文本 -->
    <div class="highlight-result">
      <template v-for="(segment, index) in highlightedSegments" :key="index">
        <!-- 染色片段：根据type显示对应颜色 -->
        <el-text
          v-if="segment.isColored"
          :type="segment.type"
        >
          {{ segment.text }}
        </el-text>
        <!-- 非染色片段：默认颜色 -->
        <el-text v-else>{{ segment.text }}</el-text>
      </template>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'

// 模拟后端返回的高亮数据（实际项目中替换为接口请求结果）
const highlightData = ref([
  {
    keyword: "XX主变",
    keywordIndex: [1, 6],
    keywordColor: { red: 0, green: 255, blue: 0, alpha: 255 } // G=255 → success
  },
  {
    keyword: "220kV#1主变",
    keywordIndex: [1, 9],
    keywordColor: { red: 255, green: 0, blue: 0, alpha: 255 } // R=255 → danger
  },
  {
    keyword: "初始状态",
    keywordIndex: [8, 13],
    keywordColor: { red: 0, green: 255, blue: 0, alpha: 255 } // G=255 → success
  },
  {
    keyword: "目标状态",
    keywordIndex: [15, 20],
    keywordColor: { red: 255, green: 0, blue: 0, alpha: 255 } // R=255 → danger
  },
  {
    keyword: "冷备用",
    keywordIndex: [15, 17],
    keywordColor: { red: 0, green: 255, blue: 0, alpha: 255 } // G=255 → success
  }
])

// 用户输入的字符串
const inputStr = ref('XX主变220kV#1主变热备用初始状态目标状态冷备用')

// 处理高亮片段：拆分字符串并判断类型
const highlightedSegments = computed(() => {
  const str = inputStr.value
  if (!str) return []

  // 1. 标准化所有高亮区间（转换为0开头索引，排序，去重）
  const normalizedRanges = highlightData.value
    .map(item => ({
      start: item.keywordIndex[0] - 1, // 1开头→0开头
      end: item.keywordIndex[1],
      type: item.keywordColor.red === 255 ? 'danger' : 'success' // R=255→danger，G=255→success
    }))
    .sort((a, b) => a.start - b.start) // 按起始索引升序排列

  // 2. 拆分字符串为片段
  const segments = []
  let lastEnd = 0 // 记录上一个片段的结束位置

  for (const { start, end, type } of normalizedRanges) {
    // a. 先添加“上一个结束到当前开始”的非染色片段
    if (start > lastEnd) {
      segments.push({
        text: str.slice(lastEnd, start),
        isColored: false,
        type: ''
      })
    }

    // b. 添加当前染色片段
    if (end > start) { // 避免无效区间
      segments.push({
        text: str.slice(start, end),
        isColored: true,
        type
      })
    }

    // c. 更新上一个结束位置
    lastEnd = end
  }

  // 3. 添加最后剩余的非染色片段
  if (lastEnd < str.length) {
    segments.push({
      text: str.slice(lastEnd),
      isColored: false,
      type: ''
    })
  }

  return segments
})
</script>

<style>
.highlight-result {
  font-size: 16px;
  line-height: 1.5;
}
</style>